// out: ../css/

// 导入初始化样式
@import 'base.less';

@mainColor: #fb7299;
@ratio: 3.75;

.header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: (84vw/@ratio);
    z-index: 1;
    background-color: #fff;
    .navbar{
        height: (44vw/@ratio);
        line-height: (44vw/@ratio);
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 (12vw / @ratio) 0 (18vw / @ratio);
        .left {
            .Navbar_logo {
                font-size: (28vw / @ratio);
                color: @mainColor;
            }
        }
        .right{
            display: flex;
            align-items: center;
            
            .ic_search_tab {
                font-size: (22vw / @ratio);
                color: #ccc;
            }
            .login {
                width: (24vw / @ratio);
                height: (24vw / @ratio);
                margin-left: (24vw / @ratio);
                background-image: url('../images/login.png');
                background-size: contain;
            }

            .download {
                width: (72vw / @ratio);
                height: (24vw / @ratio);
                margin-left: (24vw/ @ratio);
                background-image: url('../images/download.png');
                background-size: contain;
            }
        }
    }
    .menu{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(0,0,0,0.2);
        .tab {
            ul{
                display: flex;
                justify-content: space-between;
                li{
                    padding: 0 (16vw/@ratio);
                    height: (40vw/@ratio);
                    line-height: (40vw/@ratio);
                    &.active{
                        a {
                            color: @mainColor;
                            border-bottom-color: @mainColor;
                        border-bottom: (2vw/@ratio) solid @mainColor;

                        }
                     }
                    a{
                        font-size: (14vw/@ratio);
                        padding-bottom: (10vw/@ratio);                        
                    }
                }
            }
        }
        .more{
            position: absolute;
            right: 0;
            width: (40vw/@ratio);
            height: (22vw/@ratio);
            line-height: (22vw/@ratio);
            background-color: #fff;
            text-align: center;
            .general_pulldown_s{
                color: #aaa;
                font-size: (18vw/@ratio);
            }
        }
    }
}
.main{
    display: flex;
    flex-wrap: wrap;
    margin: (90vw/@ratio) 0;
    .video-item{
        width: 50vw;
        height: (136vw/@ratio);
        padding: (8vw / @ratio) (5vw / @ratio);
        .card{
            position: relative;
            img{
            border-radius: .5vw;
            }
            .count{
                position: absolute;
                left: 0;
                bottom: 0;
                color: #fff;
                display: flex;
                width: 100%;
                justify-content: space-between;
                font-size: (14vw/@ratio);
                padding: (3vw/@ratio) (10vw/@ratio);
            }
        }
        .title{
            font-size: (13vw/@ratio);
        }
    }
}
.btn {
    position: fixed;
    left: 0;
    bottom: (30vw / @ratio);
    width: 100%;
    height: (36vw / @ratio);
    padding: (12vw / @ratio);

    a {
        display: block;
        height: (36vw / @ratio);
        background-color: @mainColor;
        border-radius: (18vw / @ratio);
        text-align: center;
        line-height: (36vw / @ratio);
        color: #fff;
        box-shadow: 0 0 (12vw / @ratio) rgba(0,0,0,0.2);

        span {
            font-size: (14vw / @ratio);
        }
    }
}